<script lang="ts">
  import anime from 'animejs'
  import T from './easa_anime/button.svelte'
  let item_ease = [
    {
      type: 'Ease In',
      value: '0.550, 0.085, 0.680, 0.530',
      name: 'easeInQuad',
    },
    {
      type: 'Ease In',
      value: '0.550, 0.055, 0.675, 0.190',
      name: 'easeInCubic',
    },
    {
      type: 'Ease In',
      value: '0.895, 0.030, 0.685, 0.220',
      name: 'easeInQuart',
    },
    {
      type: 'Ease In',
      value: '0.755, 0.050, 0.855, 0.060',
      name: 'easeInQuint',
    },
    {
      type: 'Ease In',
      value: '0.470, 0.000, 0.745, 0.715',
      name: 'easeInSine',
    },
    {
      type: 'Ease In',
      value: '0.950, 0.050, 0.795, 0.035',
      name: 'easeInExpo',
    },
    {
      type: 'Ease In',
      value: '0.600, 0.040, 0.980, 0.335',
      name: 'easeInCirc',
    },
    {
      type: 'Ease In',
      value: '0.600, -0.280, 0.735, 0.045',
      name: 'easeInBack',
    },
    {
      type: 'Ease Out',
      value: '0.250, 0.460, 0.450, 0.940',
      name: 'easeOutQuad',
    },
    {
      type: 'Ease Out',
      value: '0.215, 0.610, 0.355, 1.000',
      name: 'easeOutCubic',
    },
    {
      type: 'Ease Out',
      value: '0.165, 0.840, 0.440, 1.000',
      name: 'easeOutQuart',
    },
    {
      type: 'Ease Out',
      value: '0.230, 1.000, 0.320, 1.000',
      name: 'easeOutQuint',
    },
    {
      type: 'Ease Out',
      value: '0.390, 0.575, 0.565, 1.000',
      name: 'easeOutSine',
    },
    {
      type: 'Ease Out',
      value: '0.190, 1.000, 0.220, 1.000',
      name: 'easeOutExpo',
    },
    {
      type: 'Ease Out',
      value: '0.075, 0.820, 0.165, 1.000',
      name: 'easeOutCirc',
    },
    {
      type: 'Ease Out',
      value: '0.175, 0.885, 0.320, 1.275',
      name: 'easeOutBack',
    },
    {
      type: 'Ease In Out',
      value: '0.455, 0.030, 0.515, 0.955',
      name: 'easeInOutQuad',
    },
    {
      type: 'Ease In Out',
      value: '0.645, 0.045, 0.355, 1.000',
      name: 'easeInOutCubic',
    },
    {
      type: 'Ease In Out',
      value: '0.770, 0.000, 0.175, 1.000',
      name: 'easeInOutQuart',
    },
    {
      type: 'Ease In Out',
      value: '0.860, 0.000, 0.070, 1.000',
      name: 'easeInOutQuint',
    },
    {
      type: 'Ease In Out',
      value: '0.445, 0.050, 0.550, 0.950',
      name: 'easeInOutSine',
    },
    {
      type: 'Ease In Out',
      value: '1.000, 0.000, 0.000, 1.000',
      name: 'easeInOutExpo',
    },
    {
      type: 'Ease In Out',
      value: '0.785, 0.135, 0.150, 0.860',
      name: 'easeInOutCirc',
    },
    {
      type: 'Ease In Out',
      value: '0.680, -0.550, 0.265, 1.550',
      name: 'easeInOutBack',
    },
  ]
  // let active: boolean = false

  let seclect = 0,
  let ease_value: string,
    ease_name: string,
    coordinates: string,
    ratio = 2
  function handler(params) {
    // console.log(params)
    seclect = params.detail.x
    ease_value = params.detail.y
    ease_name = params.detail.z

    coordinates = getCoordinates(ease_value)

    let timeline = anime.timeline({
      // easing: 'easeOutExpo',
      // duration: 750,
      loop: true,
    })

    timeline
      .add(
        {
          targets: '.axis.x',
          opacity: [
            { value: [0, 1], delay: 0, duration: 500 },
            { value: 0, delay: 1500, duration: 500 },
          ],
          translateX: { value: [0, 200 * ratio], delay: 500, duration: 1500 },
          easing: 'linear',
          offset: 0,
        },
        0
      )
      .add(
        {
          targets: '.axis.y',
          opacity: [
            { value: [0, 1], delay: 0, duration: 500 },
            { value: 0, delay: 1500, duration: 500 },
          ],
          translateY: { value: [0, -(200 * ratio)], delay: 500, duration: 1500, easing: ease_name },
          easing: 'linear',
          offset: 0,
        },
        0
      )
      .add(
        {
          targets: '.ball',
          translateY: { value: [100, 0], delay: 500, duration: 1500, easing: ease_name },
          scale: [
            { value: [0, 1], delay: 0, duration: 500, easing: 'easeOutBack' },
            { value: 0, delay: 1500, duration: 500, easing: 'easeInBack' },
          ],
          offset: 0,
        },
        0
      )

    anime(
      {
        targets: '.easings svg path',
        d: coordinates,
        offset: 0,
      },
      0
    )
  }

  function convertCoordinates(coords) {
    var x1 = coords[0] * 100
    var y1 = 100 - coords[1] * 100
    var x2 = coords[2] * 100
    var y2 = 100 - coords[3] * 100
    return 'M0 100C' + x1 + ' ' + y1 + ' ' + x2 + ' ' + y2 + ' 100 0'
  }

  function getCoordinates(dd) {
    console.log(dd)
    // return convertCoordinates(value)
    return convertCoordinates(dd.split(','))
  }
</script>

<div class="relative flex w-full h-screen p-10 my-10 ">
	<div class="easings">
		<div class="output">
			<div class="grid visualizer-wrapper">
				<div class="axis x" />
				<div class="axis y" />
				<div class="visualizer">
					<div class="ball" style="transform: translateY(100px) scale(0)" />
					<svg viewBox="0 0 100 100">
						<path class="curve" d={coordinates} />
					</svg>
				</div>
			</div>
			<div class="grid value" />
		</div>
		<div class="options">
			{#each item_ease as { type, name, value }, i}
				<T {i} {name} {value} {seclect} on:message={handler} />
			{/each}
		</div>
	</div>
</div>

<style>
	.easings {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.output {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		height: 400px;
	}
	.options {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		width: 100%;
		min-height: 300px;
	}
	.grid {
		border-top: 1px solid rgba(255, 255, 255, 0.2);
		border-right: 1px solid rgba(255, 255, 255, 0.2);
		background: linear-gradient(0deg, rgba(255, 255, 255, 0.2) 1px, rgba(0, 0, 0, 0) 1px),
			linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, rgba(0, 0, 0, 0) 1px),
			linear-gradient(0deg, rgba(255, 255, 255, 0.1) 1px, rgba(0, 0, 0, 0) 1px),
			linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, rgba(0, 0, 0, 0) 1px);
		background-position: 0px -1px;
		background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
	}
	.visualizer-wrapper {
		position: relative;
		width: 200px;
		height: 200px;
	}
	.visualizer {
		position: relative;
		width: 100px;
		height: 100px;
		transform: scale(2);
		transform-origin: 0 0;
	}
	.value {
		width: 20px;
		height: 200px;
		margin-left: 20px;
	}
	@media screen and (min-width: 980px) {
		.easings {
			flex-direction: row;
		}
		.output {
			width: 50%;
			height: 100%;
		}
		.options {
			width: 50%;
			height: 100%;
		}
		.visualizer-wrapper {
			width: 400px;
			height: 400px;
		}
		.visualizer {
			transform: scale(4);
		}
		.value {
			width: 40px;
			height: 400px;
			margin-left: 40px;
		}
	}
	.axis {
		opacity: 0;
		position: absolute;
		background: #5a87ff;
	}
	.axis.x {
		width: 1px;
		height: 100%;
		transform-origin: 0 0;
	}
	.axis.y {
		bottom: 0;
		width: 100%;
		height: 1px;
		transform-origin: 100% 0;
	}
	.ball {
		position: absolute;
		z-index: 2;
		top: 0;
		left: 100%;
		width: 10px;
		height: 10px;
		margin: -5px 0 0 10px;
		background: #ff1461;
		border-radius: 50%;
	}
	.easings svg {
		overflow: visible;
		position: relative;
		z-index: 1;
		width: 100%;
		height: 100%;
	}
	path {
		fill: none;
		stroke: #fff;
		stroke-width: 0.5;
	}
</style>
